<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import="java.util.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="<%=request.getContextPath()%>/js/jquery.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/validateRegistration.js" type="text/javascript"></script>
<style>
.wrong{ border: 1px solid red ; background-color: pink}
.right { border: 1px solid green ; background-color: lightgreen}
.hint onError { font : 5px, red}
#usernameResponse   { color:red; font-weight:bold; padding-left:8px; display:none; }
</style>
<title>Welcome to the Location and game based mobile language learning platform</title>
</head>
<%
	ArrayList<String> errorMsgs = (ArrayList)request.getAttribute("errorMsgs");
	StringBuffer msg = new StringBuffer(" ");
	if(errorMsgs != null) {
		for(int i = 0; i < errorMsgs.size(); ++i) msg.append(errorMsgs.get(i) + "</br>");
	}
%>
<body>
<form name="regForm" id="regForm" method="post" action="<%=request.getContextPath()%>/DesignerService?method=register">
<input type="hidden" value="registerUser" name="method">
  <table width="980" border="0">
    <tr>
      <td width="117">&nbsp;</td>
      <td width="118">&nbsp;</td>
      <td width="731"><span id="usernameResponse">Sorry, this username is taken, we require a different username.</span></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Username</td>
      <td><label for="username"></label>
      <input type="text" name="username" id="username" class="must" ></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Password</td>
      <td><label for="password"></label>
      <input type="password" name="password" id="password" class="must" ></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Confirm Password</td>
      <td><label for="confirmpassword"></label>
      <input type="password" name="confirmpassword" id="confirmpassword" class="must" ></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Email</td>
      <td><label for="email"></label>
      <input type="text" name="email" id="email" class="must" ></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Organization</td>
      <td><label for="org"></label>
      <input type="text" name="org" id="org"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2"><div id="errorDiv"> </div><div id="message"><%=msg%><div></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="2"><input type="submit" name="submit" id="submit" value="Submit">        <input type="reset" name="reset" id="reset" value="Reset"></td>
    </tr>
  </table>
</form>
</body>
</html>